<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-03 16:49:32
 * @LastEditTime: 2019-09-26 17:57:00
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<style type="text/css">
		.van-popup {
			width: 100%;
			/* height: 100%; */
		}

		.van-popup .filter-list {
			height: calc(100% - 44px);
			padding: 30px 0 20px 10px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.van-popup .filter-txt {
			line-height: 42px;
		}

		.van-popup .van-row {
			border-bottom: 1px solid #ebedf0;
			padding-bottom: 5px;
		}

		.van-popup .filter-condition {
			height: 26px;
			line-height: 26px;
			width: 80%;
			margin-bottom: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.van-popup .price-section {
			width: 100%;
			border: 0;
			height: 28px;
			border-radius: 14px;
			background: #efefef;
			text-align: center;
			font-size: 12px;
			color: #aeabb1;
		}

		.van-popup .price-line {
			text-align: center;
			height: 28px;
			line-height: 28px;
			color: #e5e5e5;
			font-size: 12px;
		}

		.nav {
			background: #fff;
			padding: 0 10px;
			height: 34px;
			padding-top: 4px;
			/* line-height: 24px; */
		}

		.r {
			position: absolute;
			left: 0;
			top: 34px;
			bottom: 0;
			width: 100%;
			overflow-y: auto;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="代销库存查询" left-arrow @click-left="onClickLeft">
				<div slot="right" class="head-right">
					<span @click="showSearch = true;">
						<img src="../image/search.png" />
					</span>
				</div>
			</van-nav-bar>
			<div class="body-no-bottom">
				<div class="content">
					<div class="nav" v-if="level == 2">
						<van-tag @click="backLevel">{{nav}}</van-tag>
					</div>
					<div :class="level==1?'':'r'">
						<div v-if="level == 1">

							<van-cell v-for="row in typeArray" is-link @click="nextLevel(row)">
								<div><span>{{row.PrTreeName}}</span></div>
								<div style="color: #969799;">
									<van-row>
										<van-col span="14">库存:{{row.BNum}}</van-col>
										<van-col span="10">销售金额:￥{{row.DMoney}}</van-col>
									</van-row>

								</div>
							</van-cell>

						</div>

						<div v-if="level == 2">
							<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
								@load="listOnLoad">
								<div class="report">
									<div class="table-full">
										<table style="width: 100%;">
											<tr>
												<th>商品名称</th>
												<th>库存</th>
												<th>销售金额</th>
											</tr>
											<tr v-for="(row,index) in filterResult">
												<td class="td_center">{{row.ProductName}}</td>
												<td class="td_right">{{row.BNum}}</td>
												<td class="td_right">{{row.DMoney}}</td>
											</tr>
										</table>
									</div>
								</div>
							</van-list>


						</div>
					</div>





				</div>
				<van-loading v-if="showLoading" />
			</div>

			<van-popup v-model="showSearch" round position="bottom">
				<div>
					<van-cell title="客户" :value="filter.S_ClientName" is-link @click="openScreen(-1,10)">
					</van-cell>
					<van-field label="产品名称" v-model="filter.S_CONT"></van-field>
				</div>
				<div class="btn-padding">
					<van-button type="primary" block style="border-radius: 0;" @click="search">查询</van-button>
				</div>
			</van-popup>


		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;



	apiready = function () {
		//$('.init-full').show();

		api.addEventListener({
			name: 'selectRow'
		}, function (ret, err) {
			var selectType = ret.value.selectType;
			var type = ret.value.type;
			var row = ret.value.row;
			if (selectType == 10) {
				if (row) {
					vm.filter.S_ClientName = row.name;
					vm.filter.S_ClientID = row.id;
				} else {
					vm.filter.S_ClientName = '';
					vm.filter.S_ClientID = 0;
				}

			}

		});

		var userInfo = FLD.getUserInfo();
		var clientInfo = api.pageParam.clientInfo;
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				listLoading: false,
				listFinished: true,
				typeArray: [],
				filterResult: [],
				level: 1,
				nav: '',
				filter: {
					S_BranchID: userInfo.S_BranchID,
					S_ClientID: 0,
					S_ClientName: '',
					S_ProductID: 0,
					S_CONT: '',
					S_PrTreeName: '',
					S_PageSize: 20,
					S_Pageindex: 1
				},
				showSearch: false
			},
			created: function () {
				if (clientInfo) {
					this.filter.S_ClientID = clientInfo.id;
					this.filter.S_ClientName = clientInfo.name;
					this.getDefaultData();
				} else {
					this.showSearch = true;
				}

			},
			methods: {
				getDefaultData() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('AP_DXKCCXN', that.filter, function (res) {
						that.showLoading = false;
						that.listFinished = false;
						that.typeArray = res.ds;
						that.filterResult = res.ds1;
					})
				},
				search() {
					var that = this;
					that.showSearch = false;
					that.filter.S_PrTreeName = '';
					that.filter.S_Pageindex = 1;
					that.showLoading = true;
					FLD.ajax('AP_DXKCCXN', that.filter, function (res) {
						that.showLoading = false;
						that.listFinished = false;
						that.typeArray = res.ds;
						that.filterResult = res.ds1;
						if (that.filter.S_CONT) {
							that.level = 2;
							that.nav = '关键词【' + that.filter.S_CONT + '】查询';
						}

					})
				},
				listOnLoad() {
					var that = this;
					that.filter.S_Pageindex++;
					FLD.ajax('AP_DXKCCXN', that.filter, function (res) {
						that.listLoading = false;
						if (res.ds1.length == 0) {
							that.listFinished = true;
						}
						that.filterResult = that.filterResult.concat(res.ds1);
					})
				},
				nextLevel(row) {
					var that = this;
					that.filter.S_PrTreeName = row.PrTreeName;
					that.filter.S_Pageindex = 1;
					that.showLoading = true;
					FLD.ajax('AP_DXKCCXN', that.filter, function (res) {
						that.showLoading = false;
						that.listFinished = false;
						that.filterResult = res.ds1;
						that.level = 2;
						that.nav = row.PrTreeName;
					})
				},
				backLevel() {
					var that = this;
					that.filter.S_PrTreeName = '';
					that.filter.S_Pageindex = 1;
					that.filter.S_CONT = '';
					that.level = 1;
					that.nav = '';
					that.getDefaultData();
				},
				openScreen(type, index) {
					var that = this;
					var obj = obj = {
						S_Type: index,
						S_Cont: '',
						S_BranchID: userInfo.S_BranchID,
						S_SXZ: '',
						S_StockID: userInfo.S_StockID,
						S_CargoID: userInfo.S_CargoID,
						S_BarCode: '',
						S_PriceN: 0,
						S_ProductID: 0
					}

					api.openWin({
						name: '筛选' + index,
						url: 'common/baseScreen.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							filterData: obj,
							type: type,
							allowClear: true
						}
					})

				},

				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>